<h2>Ship Modules</h2>

<nz-select [(ngModel)]="type" (ngModelChange)="reload()">
  <nz-option nzValue="a" nzLabel="All Types"></nz-option>
  <nz-option nzValue="w" nzLabel="Weapons"></nz-option>
  <nz-option nzValue="d" nzLabel="Defences"></nz-option>
  <nz-option nzValue="g" nzLabel="Generators"></nz-option>
  <nz-option nzValue="t" nzLabel="Thrusters"></nz-option>
  <nz-option nzValue="o" nzLabel="Others"></nz-option>
</nz-select>
<nz-select [(ngModel)]="status" (ngModelChange)="reload()">
  <nz-option nzValue="a" nzLabel="All Statuses"></nz-option>
  <nz-option nzValue="u" nzLabel="Unlocked"></nz-option>
  <nz-option nzValue="l" nzLabel="Locked"></nz-option>
</nz-select>

<nz-list [nzDataSource]="modules" nzBordered [nzRenderItem]="moduleItem">
  <ng-template #moduleItem let-mod>
    <nz-list-item class="main-background">
      <div
        fxLayout="rows wrap"
        fxLayoutAlign="center center"
        class="modRow"
        fxLayoutAlign="start"
      >
        <div>
          <i
            nz-icon
            [nzType]="mod.shape"
            nzTheme="outline"
            class="moduleIcon"
          ></i>
        </div>
        <div
          fxFlex.xs="calc(100% - 60px)"
          fxFlex.sm="0 1 calc(60% - 60px)"
          fxFlex.md="0 1 calc(50% - 60px)"
          fxFlex.gt-md="0 1 calc(40% - 60px)"
        >
          <span class="firstLine">
            <strong>{{ mod.name }}</strong>
            <i
              *ngIf="!mod.unlocked"
              nz-icon
              nzType="lock"
              nzTheme="outline"
              class="lockIcon"
            ></i>
            <span class="monospace" nz-tooltip nzTooltipTitle="Max Level">
              {{ mod.maxLevel - 1 | format: true }}
            </span>
          </span>

          <app-module-info [mod]="mod"></app-module-info>
        </div>

        <div fxLayout="row wrap">
          <span
            *ngFor="let item of mod.technologies"
            nz-tooltip
            [nzTooltipTitle]="item.technology.name"
            class="techLine"
            fxLayout="row"
            fxLayoutAlign="center center"
            fxLayoutGap="0.3rem"
          >
            <i
              nz-icon
              [nzType]="item.technology.icon"
              [style.color]="item.technology.color"
            ></i>
            <span class="monospace">{{ item.multi * 100 | format }}%</span>
          </span>
        </div>

        <div
          fxLayout="row wrap"
          fxLayoutGap="0.3rem"
          *ngIf="mod.research"
          class="researches"
        >
          <!-- Research -->
          <span
            fxLayoutAlign="center center"
            nz-popover
            [nzPopoverContent]="contentTemplate"
          >
            <i
              nz-icon
              [nzType]="mod.research.type?.icon"
              [style.color]="mod.research.type?.color"
              class="res-icon"
            ></i>
            <span>{{ mod.research.name }}</span>

            <ng-template #contentTemplate>
              <app-research-preview
                [noProgress]="true"
                [research]="mod.research"
              ></app-research-preview>
            </ng-template>
          </span>

          <!-- Research Special -->
          <span
            fxLayoutAlign="center center"
            *ngIf="mod.specialResearch"
            nz-popover
            [nzPopoverContent]="contentTemplate2"
          >
            <i
              nz-icon
              [nzType]="mod.specialResearch.type?.icon"
              [style.color]="mod.specialResearch.type?.color"
              class="res-icon"
            ></i>
            <span>{{ mod.specialResearch.name }}</span>

            <ng-template #contentTemplate2>
              <app-research-preview
                [noProgress]="true"
                [research]="mod.specialResearch"
              ></app-research-preview>
            </ng-template>
          </span>

          <!-- Challenge-->
          <span
            *ngIf="mod.research.requiredChallenge"
            fxLayoutAlign="center center"
          >
            <span>
              <span class="text-secondary">Challenge:</span>
              {{ mod.research.requiredChallenge.challenge.name }} Lv.
              {{
                mod.research.requiredChallenge.challenge.level | format: true
              }}
            </span>
          </span>
        </div>
      </div>
    </nz-list-item>
  </ng-template>
</nz-list>
